<template>
  <grimm-page title="Tag">
    <div slot="content">
      <section>
        <h1 class="example-page-title">失败/不可行</h1>
        <grimm-tag content="需特批" status="fail" />
      </section>

      <section>
        <h1 class="example-page-title">成功/可行/正向</h1>
        <grimm-tag content="自动审批通过" status="success" />
      </section>

      <section>
        <h1 class="example-page-title">中间/提醒</h1>
        <grimm-tag content="有批复审批" status="remind" />
      </section>

      <section>
        <h1 class="example-page-title">待定/未进行</h1>
        <grimm-tag content="待发起合同" status="unStart" />
      </section>

      <section>
        <h1 class="example-page-title">自定义样式</h1>
        <grimm-tag content="自定义内容" :tagStyle="{...tagStyle}" />
      </section>
    </div>
  </grimm-page>
</template>

<script>
import GrimmPage from '../../components/GrimmPage.vue';
export default {
  components: {
    GrimmPage,
  },
  data() {
    return {
      tagStyle: {
        color: '#999',
        background: '#000',
      },
    };
  },
};
</script>
<style lang="stylus" scoped>
section {
  margin-bottom: 16px;
}
</style>

